<template>
  <div class="draglist">
    <draggable
      :list="list"
      :group="group"
      @start="drag = true"
      @end="drag = false"
      item-key="id"
      ghost-class="ghost"
    >
      <template #item="{ element }">
        <div class="drag-list-item">{{ element }}</div>
      </template>
    </draggable>
  </div>
</template>

<script>
import { reactive } from 'vue';
import draggable from "vuedraggable";
export default {
    name: 'DragList',
    components:{draggable},
    props:{
        group:{
            type:String
        },
        list:{
            type:Array
        }
    },
    setup(){
    }
}
</script>

<style lang="scss" scoped>
.draglist {
    display: inline-block;
    min-width: 300px;
    vertical-align: top;
  .drag-list-item {
    border: 1px solid #d0d0d0;
    margin: 5px 0;
    padding: 5px 10px;
    background: #fff;
  }
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>